<template>
  <!-- 轮播图管理 -->
  <div class="CarouselManagement">
    <div class="CarouselManagement-tittle">
      <div class="crumbs">
        <p><span>系统设置 /</span> <span> Banner图管理</span></p>
        <h3>Banner图管理</h3>
      </div>
      <div class="search">
        <div class="search-left">
          <span>Banner名称</span>
          <el-input v-model="input" placeholder="请输入" />
        </div>
        <div class="search-right">
          <el-button type="primary" @click="searchFn">查询</el-button>
          <el-button type="primary" plain  @click="resetFn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="ResidentLabels-content">
      <div class="content-title">
        <span>Banner列表</span>
        <div class="title-btn">
          <el-button type="primary" @click="addFn">+ 新建</el-button>
          <el-button type="primary" plain @click="bulkDel">批量操作</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="80" align="center" />

        <el-table-column label="Banner缩略图" align="center">
          <template #default="scope">
            <img :src="scope.row.bannerGraphSrc" alt="" />
          </template>
        </el-table-column>

        <el-table-column
          prop="bannerName"
          label="名称"
          width="100"
          align="center"
        />
        <el-table-column
          prop="user.name"
          label="添加人"
          width="180"
          align="center"
        />
        <el-table-column prop="addTime" label="添加时间" align="center" />
        <el-table-column prop="sortNo" label="排序号" align="center" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="edit(scope.row)">编辑</el-button>
            <el-button type="primary" text @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="pages">
        <Page :count="count" :total="total" :currentPage="currentPage"></Page>
      </div>
    </div>
    <!-- 弹窗 -->
   
  </div>
</template>

<script setup >
import http from "../../utils/http";
import { ref, reactive, onMounted } from "vue";
import Page from "../../components/Page.vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const input = ref("");
const tableData = ref([]);
const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});
let page = ref(1);
const count = ref(5);
let total = ref(20);
let currentPage = page;

let getdata = () => {
  http({
    url: "/mapManagement/list",
    method: "get",
    params: {
      page: page.value,
      limit: count.value,
      bannerName:input.value
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      tableData.value = data.data;
      total.value = data.total;
    }
  });
};
onMounted(() => {
  getdata();
});

// 查询
const searchFn = () => {
  getdata();
  console.log("查询");
};

// 重置
const resetFn = () => {
  console.log("重置");
  input.value = "";
  getdata();
};

// 新增
const addFn = () => {  
  router.push({
    path: "/home/addCarouse",
    name: "addCarouse",
  });
};



// 批量删除
// const multipleSelection = ref<number[]>([]);
  const multipleSelection = ref([]);
// 多选框变得方法
const selectionChange = (val) => {
  multipleSelection.value = [];
  val.forEach((v) => {
    multipleSelection.value.push(v.id);
  });
  console.log(multipleSelection.value);
  // console.log(typeof multipleSelection.value)
};

let bulkDel = () => {
  http({
    url: "/mapManagement/delete",
    method: "DELETE",
    data: multipleSelection.value,
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

// 删除
let del = (e) => {
  http({
    url: "/mapManagement/delete",
    method: "DELETE",
    data: [e],
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getdata();
    }
  });
};
// 编辑
let edit = (v) => {
console.log("编辑");
router.push({
    path: "/home/editCarouse",
    name: "editCarouse",
    query:v
  });};

</script>

<style lang="less" scoped>
.CarouselManagement {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .CarouselManagement-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
    .search {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        span {
          font-size: 16px;
        }
        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }
  .ResidentLabels-content {
    padding: 15px 20px;
    // border: 1px solid red;
    margin-top: 20px;
    background-color: white;
    .content-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pages {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
    }
    img{
        width: 50px;
        height: 50px;
    }
  }
  .el-dialog {
    .tanchu-body {
      display: flex;
      input {
        flex: 1;
      }
    }
  }
}
</style>
